<template>
  <back-dialog-base :title="title" :visible="visibleView" :hasFooter="false">
    <template #content>
      <div class="main">
        <div class="police">
          <div class="poli">
            <div class="police-title">
              <div class="police-svg">
                <svg-icon icon="product-alarm"></svg-icon>
              </div>
              <span class="police-fz">报警</span>
            </div>
            <!-- <button @click="show">show</button> -->
            <div class="police-main">
              <div class="police-Dot">
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
              </div>
              <div class="police-text">
                <!-- 1 -->
                <div class="text-time">
                  <span
                    >报警时间：{{ props.rowData.equipmenmonitorForm.alarmTime }}
                  </span>
                </div>
                <div class="text-time">
                  <span>
                    报警描述：<span style="color: #ffb403">{{
                      props.rowData.equipmenmonitorForm.alarmDesc
                    }}</span>
                  </span>
                </div>
              </div>
              <!-- 2 -->
            </div>
            <div>
              <span class="police-time">
                &emsp;&emsp;&emsp;<span style="color: #f97c00"
                  >&emsp;&emsp;</span
                ></span
              >
            </div>
          </div>
          <div class="analysis-main">
            <div class="police-title">
              <div class="police-svg" v-if="!formInline.analyze">
                <svg-icon icon="product-unanalyze"></svg-icon>
              </div>
              <div class="police-svg" v-else>
                <svg-icon icon="product-analyze"></svg-icon>
              </div>
              <span
                class="police-fz"
                :style="
                  formInline.analyze
                    ? { color: '#1E6AE7' }
                    : { color: '#AEBBD3' }
                "
                >分析</span
              >
            </div>
            <div class="police-main">
              <div class="police-Dot" v-show="formInline.analyze">
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
              </div>
              <div class="police-Dot" v-show="!formInline.analyze">
                <div class="police-D">
                  <span class="Dot2"></span>
                </div>
                <div class="police-D">
                  <span class="Dot2"></span>
                </div>
                <div class="police-D">
                  <span class="Dot2"></span>
                </div>
              </div>
              <div class="police-text" v-show="formInline.analyze">
                <div class="text-time">
                  分析结果：<span style="color: #f82b24">{{
                    formInline.analyze.dealStatus || ''
                  }}</span>
                </div>
                <div style="display: flex">
                  <div class="text-time">
                    分析人：{{ formInline.analyze.dealUser || '' }}
                  </div>
                  <div class="text-time" style="margin-left: 102px">
                    处置建议：{{ formInline.analyze.dealOpinion || '' }}
                  </div>
                </div>
                <div class="text-time">
                  分析时间：{{ formInline.analyze.dealTime || '' }}
                </div>
              </div>
            </div>
          </div>
          <div class="management-main" v-show="formInline.analyze">
            <div class="police-title">
              <div class="police-svg" v-if="!formInline.dispose">
                <svg-icon icon="product-undispose"></svg-icon>
              </div>
              <div class="police-svg" v-else>
                <svg-icon icon="product-dispose"></svg-icon>
              </div>
              <span
                class="police-fz"
                :style="
                  formInline.dispose
                    ? { color: '#1E6AE7' }
                    : { color: '#AEBBD3' }
                "
              >
                处置</span
              >
            </div>
            <div class="police-main">
              <div class="police-Dot" v-show="formInline.dispose">
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
              </div>
              <div class="police-Dot" v-show="!formInline.dispose">
                <div class="police-D">
                  <span class="Dot2"></span>
                </div>
                <div class="police-D">
                  <span class="Dot2"></span>
                </div>
                <div class="police-D">
                  <span class="Dot2"></span>
                </div>
              </div>
              <div class="police-text" v-show="formInline.dispose">
                <div class="text-time">
                  处置时间：{{ formInline.dispose?.dealTime || '未知' }}
                </div>

                <div class="text-time">
                  处置结果：<span style="color: #1e6ae7">{{
                    formInline.dispose?.dealOpinion
                  }}</span>
                </div>
                <div class="text-time" >
                  处置人：{{ formInline.dispose?.dealUser || '未知' }}
                </div>

                <div class="text-time" style="display: flex">
                  附件：
                  <!-- <svg-icon
                      style="cursor: pointer"
                      icon="Photo"
                      @click="tp(formInline.dispose)"
                    ></svg-icon> -->
                  <div
                    class="image-preview"
                    v-for="item in props.photoList"
                    :key="item.id"
                  >
                    <el-image
                      style="width: 35px; height: 35px"
                      :src="item.file_url"
                      :preview-src-list="props.srcList"
                      :initial-index="3"
                      fit="cover"
                    />
                  </div>
                  <span style="margin-left: 125px"
                    >总计:{{ formInline.dispose.sum }}</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <!-- <el-dialog
          v-model="innerVisible"
          width="37%"
          title="处置照片"
          append-to-body
        >
          <div class="im" v-for="item in photoData" :key="item.id">
            <img :src="item" alt="" />
          </div>
        </el-dialog> -->
      </div>
    </template>
  </back-dialog-base>
</template>

<script setup>
import { defineProps, ref, watch, reactive } from 'vue'
import BackDialogBase from '@/components/BackDialogBase'
import { equipmentQuery, photaQuery } from '@/api/monitor'
import { ElMessage } from 'element-plus'
const photoData = ref({})
const listData = ref({})
const innerVisible = ref(false)
const srcList = ref([])
const showDiaFlag = ref(true)
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visibleView: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  },
  alarmNo: {
    type: Object,
    default: () => {}
  },
  srcList: {
    type: Object,
    default: () => {}
  },
  photoList: {
    type: Object,
    default: () => {}
  }
})
const viewData = reactive({
  alarmNo: ''
})
const formInline = reactive({
  analyze: {},
  dispose: {}
})

// const list = async (row) => {
//   console.log(props.rowData, props.alarmNo)
//   listData.value = await equipmentQuery(
//     props.rowData.equipmenmonitorForm.alarmNo
//   )
//   // console.log(listData.value)
//   formInline.analyze = listData.value.analyze
//   formInline.dispose = listData.value.dispose
//   // showDiaFlag.value = true
//   console.log(formInline.analyze)
// }

const list = async () => {
  // console.log(props.alarmNo)
  listData.value = await equipmentQuery(
    props.rowData.equipmenmonitorForm.alarmNo
  )
  if (Object.keys(listData.value).length === 0) {
    showDiaFlag.value = false
  } else {
    showDiaFlag.value = true
    formInline.analyze = listData.value.analyze ? listData.value.analyze : false
    formInline.dispose = listData.value.dispose ? listData.value.dispose : false
  }

  // console.log(
  //   props.alarmNo,
  //   Object.keys(listData.value).length === 0 ? '1' : '2'
  // )
}

// const list = async (row) => {
//   // console.log(props.alarmNo)
//   listData.value = await equipmentQuery(props.rowData.equipmenmonitorForm.alarmNo)
//   if (Object.keys(listData.value).length === 0) {
//     showDiaFlag.value = false
//   } else {
//     showDiaFlag.value = true
//     formInline.analyze = listData.value.analyze
//     formInline.dispose = listData.value.dispose
//   }
// }

const tp = async () => {
  const res = await photaQuery()
  photoData.value = res
  innerVisible.value = true
}
watch(
  () => props.rowData,
  () => {
    list()
    viewData.alarmNo = props.rowData.alarmNo
  }
)
</script>

<style lang="scss" scoped>
.main {
  height: 100%;
  padding: 10px;
  .police {
    width: 100%;
    .police-title {
      position: relative;
      .police-svg {
        display: inline-block;
        width: 44px;
        height: 44px;
        :deep(.svg-icon) {
          width: 100%;
          height: 100%;
        }
      }
      .police-fz {
        position: absolute;
        top: 12px;
        left: 55px;
        color: #1e6ae7;
        font-size: 14px;
      }
    }
    .police-main {
      position: relative;
      width: 100%;
      .police-Dot {
        display: inline-block;
        width: 40px;
        .police-D {
          text-align: center;
          width: 100%;
          height: 26px;
        }
      }
      .police-text {
        position: absolute;
        top: 10px;
        display: inline-block;
        width: 450px;
        padding-top: 2px;
        .text-time {
          margin-bottom: 10px;
          color: #5d6c8e;
        }
      }
    }
    .analysis-main {
      width: 100%;
      height: 150px;
    }
    .management-main {
      width: 100%;
      height: 180px;
    }
    .Contact-main {
      width: 100%;
      height: 180px;
    }
  }
}
.Dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #1e6ae7;
  border-radius: 50%;
  opacity: 1;
}
.Dot2 {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #aebbd3;
  border-radius: 50%;
  opacity: 1;
}
.poli {
  height: 100%;
}
.main .police .police-main .text {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 0;
  .text-D {
    display: inline-block;
    height: 26px;
    width: 25px;
    margin-left: 18px;
  }
  .police-time {
    position: relative;
    top: 15px;
    margin-bottom: 10px;
    color: #5d6c8e;
  }
}
.text1 {
  margin-left: 40px;
}
.im {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin-right: 20px;
  img {
    width: 100%;
    height: 100%;
  }
}
.image-preview {
  display: flex;
  margin-bottom: 10px;
  // flex-direction: row;
}
</style>
